<template>
  <div class="map_box">
    <header_component @click="screenfull_btn"/>
    <div class="map_box_header"></div>
    <div class="map_box_content">
      <div class="map_left">
        <div class="item_box">
          <div class="title">
            焊接管理信息化系统WRP
          </div>
          <div class="imgSize" :style="{padding:'10px'}">
            <img src="../../assets/map/wrp.png"/>
          </div>
        </div>
        <div class="map_margin_height"></div>
        <div class="item_box">
          <div class="title">
            设备工作运行状态
          </div>
          <table_header_auto :data_list="header_table_list.scroll_list_auto_device_status"/>
          <div id="scroll_list_auto_device_status" class="item_box_content" :style="{'width':'100%'}">
            <scroll_list_auto ref="scroll_list_auto_device_status" demo_class="scroll_list_auto_device_status"/>
          </div>
        </div>
        <div class="map_margin_height"></div>
        <div class="item_box">
          <div class="title">
            区域设备开工效率图
          </div>
          <div class="imgSize">
            <img src="../../assets/map/map.png"/>
          </div>
        </div>
      </div>
      <div class="map_margin"></div>
      <div class="map_center">
        <div class="header_device">
          <span style="color: #cccccc">总设备数:</span><span style="color: white;font-size: 2rem">{{data_analysis.device_num}}</span>/台
        </div>
        <div class="map_margin_height"></div>
        <div class="map_area">
          <map_component :height="height+'px'" ref="maps"/>
        </div>
        <div class="map_margin_height" style="height: 10px"></div>
        <div class="map_center_content">
          <div class="item_box">
            <div class="title">
              数采终端工作状态
            </div>
            <div id="work_status_pie" class="item_box_content" :style="{'width':'100%'}">
              <work_status_pie ref="work_status_pie" dom_class="work_status_pie"/>
            </div>
          </div>
          <div class="map_margin"></div>
          <div class="item_box">
            <div class="title">
              数采企业目录
            </div>
            <table_header_auto :data_list="header_table_list.enterprise"/>
            <div id="enterprise_num" class="item_box_content" :style="{'width':'100%'}">
              <enterprise_num demo_class="enterprise_num"/>
              <!--              <scroll_list_auto ref="scroll_list_auto_device_status" demo_class="scroll_list_auto_device_status"/>-->
            </div>
          </div>
          <div class="map_margin"></div>
          <div class="item_box">
            <div class="title">
              工艺执行效率
            </div>
            <table_header_auto :data_list="header_table_list.technology_list_auto"/>
            <div id="technology_list_auto" class="item_box_content" :style="{'width':'100%'}">
              <technology_list_auto demo_class="technology_list_auto"/>
            </div>
          </div>
        </div>
      </div>
      <div class="map_margin"></div>
      <div class="map_right">
        <div class="item_box">
          <div class="title">
            WRP管控项目数量
          </div>
          <div id="single_line_wrp_num" class="item_box_content" :style="{'width':'100%'}">
            <single_line ref="single_line_wrp_num" dom_class="single_line_wrp_num"/>
          </div>

        </div>
        <div class="map_margin_height"></div>
        <div class="item_box">
          <div class="title">
            接头数量
          </div>
          <div id="single_line_wrp_joint" class="item_box_content" :style="{'width':'100%'}">
            <single_line_joint ref="single_line_wrp_joint" dom_class="single_line_wrp_joint"/>
          </div>
        </div>
        <div class="map_margin_height"></div>
        <div class="item_box">
          <div class="title">
            焊工数量
          </div>
          <div id="single_line_weld" class="item_box_content" :style="{'width':'100%'}">
            <single_line_weld ref="single_line_weld" dom_class="single_line_weld"/>
          </div>

        </div>
        <div class="map_margin_height"></div>
        <div class="item_box">
          <div class="title">
            WPS数量
          </div>
          <div id="single_line_wps" class="item_box_content" :style="{'width':'100%'}">
            <single_line_wps ref="single_line_wps" dom_class="single_line_wps"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import map_component from "@/components/echart_components/map_component";
import {getStyleByEl} from "@/utils/dom/get_dom_style";
import single_line from "@/components/echart_components/enterprise/single_line";
import single_line_joint from "@/components/echart_components/enterprise/single_line_joint";
import single_line_weld from "@/components/echart_components/enterprise/single_line_weld";
import single_line_wps from "@/components/echart_components/enterprise/single_line_wps";
import {inject, reactive, onMounted, getCurrentInstance, ref} from "vue"
import header_component from "@/components/header/header_component";
import screenfull from "screenfull";
import {useStore} from "vuex";
import {get_board_data, get_WRP_data} from "@/api/cockpit/map";
import {handle_basic_xy_data} from "@/utils/handle_basic_xy_data";
import work_status_pie from "@/components/echart_components/map_components_echarts/work_status_pie";
import {message} from "ant-design-vue";
import scroll_list_auto from "@/components/scroll_list_auto/scroll_list_auto";
import table_header_auto from "@/components/scroll_list_auto/table_header_auto";
import enterprise_num from "@/components/scroll_list_auto/enterprise_num";
import technology_list_auto from "@/components/scroll_list_auto/technology_list_auto";


export default {
  name: "map_home",
  data() {
    return {
      height: "",
      dom_success: false,

    }
  },
  setup(props, context) {
    // WRP管控项目数量
    const single_line_wrp_num = ref(null)
    const single_line_wrp_joint = ref(null)
    const single_line_weld = ref(null)
    const single_line_wps = ref(null)

    // 运行状态
    const work_status_pie = ref(null)
    const scroll_list_auto_device_status = ref(null)

    const header_table_list = reactive({
      scroll_list_auto_device_status: [
        {name: "设备名称", flex: 3},
        {name: "编号", flex: 1},
        {name: "工作状态", flex: 1},
      ],
      enterprise: [
        {name: "企业", flex: 1},
        {name: "地址", flex: 1},
      ],
      technology_list_auto: [
        {name: "企业", flex: 1},
        {name: "设备数", flex: 1},
        {name: "执行率", flex: 1}
      ]

    })


    const {ctx} = getCurrentInstance()
    const store = useStore()
    const data_analysis
        = reactive({
      isFullscreen: false,
      maintenanceList: [1, 23, 3, 3, 3],
      pause: false,
      dateTime: `${new Date().getHours()}:00-${new Date().getHours() + 1}:00`,
      device_num: 0
    });
    // const echarts = inject("echarts");//引入
    /**
     * 是否全屏并按键ESC键的方法
     */
    const screenfull_btn = () => {
      if (screenfull.enabled) {
        console.log("错误")
        return false
      }
      data_analysis.isFullscreen = true
      screenfull.toggle()
    };
    const checkFull = () => {
      let isFull = screenfull.isFullscreen || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      console.log(screenfull.isFullscreen)
      if (isFull === undefined) {
        isFull = false
        return isFull
      }
      return isFull
    };
    window.onresize = () => {
// 全屏下监控是否按键了ESC
//       console.log("按下ESC")
      if (!checkFull()) {
// 全屏下按键esc后要执行的动作
        data_analysis.isFullscreen = false
        console.log("全屏关闭")
        store.commit("SET_SCREEN", false)
        // ctx.init_map()
      } else {
        console.log("全屏开启")
        store.commit("SET_SCREEN", true)
        // ctx.init_map()
      }
    };

    /**
     * 获取大数据的基础数据
     * */

    const get_big_data_api = async () => {
      const res = await get_board_data()
      if (res.code === 1) {
        try {
          work_status_pie.value.init(res.data.workStatus)
          // scroll_list_auto_device_status.value.init()
          data_analysis.device_num = res.data.totalNum.total
          ctx.init_map(res.data.allCompnay);

        } catch (e) {
          console.log(e)
          message.warning("数据解析异常,请查看后台数据库")
        }

      }
    }

    /**
     * 获取WRP的基础数据
     * */

    const get_wrp_data_api = async () => {
      const res = await get_WRP_data()
      if (res.code === 1) {
        const wpsData = handle_basic_xy_data(res.data.wpsData, "wMonth", "sNum")
        const weldData = handle_basic_xy_data(res.data.weldData, "wMonth", "sNum")
        const jointData = handle_basic_xy_data(res.data.jointData, "wMonth", "sNum")
        const projectData = handle_basic_xy_data(res.data.projectData, "wMonth", "sNum")

        single_line_wrp_num.value.init(wpsData, res.data.totalData.tWpsNum);
        single_line_wrp_joint.value.init(weldData, res.data.totalData.tJointNum);
        single_line_weld.value.init(jointData, res.data.totalData.tWeldNum);
        single_line_wps.value.init(projectData, res.data.totalData.tProjectNum);
      }
    }


    onMounted(() => {

      get_big_data_api();
      get_wrp_data_api();
    })
    return {
      screenfull_btn,
      single_line_wrp_num,
      single_line_wrp_joint,
      single_line_weld,
      single_line_wps,
      work_status_pie,
      scroll_list_auto_device_status,
      header_table_list,
      data_analysis


    }
    //
  },
  components: {
    map_component,
    single_line,
    single_line_joint,
    single_line_weld,
    single_line_wps,
    header_component,
    work_status_pie,
    scroll_list_auto,
    table_header_auto,
    enterprise_num,
    technology_list_auto
  },
  methods: {
    get_style_dom(dom) {
      const el = document.getElementById(dom);
      const style = getStyleByEl(el)
      return {
        height: style.height,
        width: style.width
      }
    },
    init_map(map) {
      const el = document.querySelector('.map_area');
      const style = getStyleByEl(el)
      this.height = Math.floor(Number(style.height.toString().replace('px', '')))
      // setTimeout(() => {
        this.$refs.maps.init(map)
      // }, 10)
      this.dom_success = true
    }
  },
}
</script>

<style scoped lang="scss">
#map_home {
  width: 100%;
}

.map_margin {
  width: 1rem;
}

.map_margin_height {
  height: 5px;
}


.item_box {
  //margin-top: 5px;
  background: url("http://www.newhlty.tz-group.com/img/statistics_bg1.a011cd44.png") no-repeat top center;
  background-size: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .title {
    color: #3a7bd5;
    font-size: 1.0rem;
    font-weight: bolder;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .imgSize {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: auto;
      max-width: 26rem;
    }
  }

  .item_box_content {
    flex: 1;
  }
}

.map_box {
  position: relative;
  height: 100%;
  background: url("http://www.newhlty.tz-group.com/img/bg.82f8f7db.png") no-repeat top center;
  background-size: 100% 100%;

  .map_box_header {
    display: flex;
    height: 3%;
  }

  .map_box_content {
    display: flex;
    flex-direction: row;
    height: 88%;

    .map_left {
      flex: 1;
      display: flex;
      flex-direction: column;

      .item_box {
        flex: 1;
        //margin-top: 5px;
        background: url("http://www.newhlty.tz-group.com/img/statistics_bg1.a011cd44.png") no-repeat top center;
        background-size: 100% 100%;

      }
    }

    .map_right {
      flex: 1;
      display: flex;
      flex-direction: column;

      .item_box {
        flex: 1;
      }
    }

    .map_center {
      flex: 2;
      display: flex;
      flex-direction: column;

      .header_device {
        height: 3rem;
        background: url("http://www.newhlty.tz-group.com/img/statistics_bg1.a011cd44.png") no-repeat top center;
        background-size: 100% 100%;
      }

      .map_area {
        flex: 2;
      }

      .map_center_content {
        display: flex;
        flex-direction: row;
        height: 100%;
        flex: 1;

        .item_box {
          flex: 1;
          background: url("http://www.newhlty.tz-group.com/img/statistics_bg1.a011cd44.png") no-repeat top center;
          background-size: 100% 100%;
          //min-width: 4rem;

        }
      }


    }


  }


}
</style>
